import React, { useState } from 'react';
import _ from "lodash";
import RGL, { WidthProvider } from "react-grid-layout";
import styles from './gridtest.css';

const ReactGridLayout = WidthProvider(RGL);

export default function Page() {
  const defaultProps = {
    className: "layout",
    items: 100,
    rowHeight: 100,
    onLayoutChange: function() {},
    cols: 100
  }
  const availableHandles = ["s", "w", "e", "n", "sw", "nw", "se", "ne"];

  const [layout, setLayout] = useState([
    {
      x: 0,
      y: 0,
      w: 1,
      h: 1,
      i: "1",
      resizeHandles: availableHandles
    },
    {
      x: 1,
      y: 0,
      w: 1,
      h: 1,
      i: "2",
      resizeHandles: availableHandles
    },
    {
      x: 0,
      y: 1,
      w: 2,
      h: 2,
      i: "3",
      resizeHandles: availableHandles
    }
  ]);
  function generateDOM() {
    return [
      <div key={"1"} className="layout-item">
        <span className="text">{"1"}</span>
      </div>,
      <div key={"2"} className="layout-item">
        <span className="text">{"2"}</span>
      </div>,
      <div key={"3"} className="layout-item">
        <span className="text">{"3"}</span>
      </div>
    ];
  }
  return (
    <ReactGridLayout
      layout={layout}
      {...defaultProps}
    >
      {generateDOM()}
    </ReactGridLayout>
  );
}

if (process.env.STATIC_EXAMPLES === true) {
  import("./test-hook.jsx").then(fn => fn.default(ResizableHandles));
}
